<!--
 * @Author: 梁卓
 * @Date: 2022-02-15 17:40:34
 * @LastEditTime: 2022-02-25 09:42:05
 * @LastEditors: Please set LastEditors
 * @Description: 所有的活动主题echarts展示
 * @FilePath: \dreamUi\src\componets\echarts\ActivityTheme.vue
-->
<template>
  <div class="theme_page">
    <div style="width: 100%; height: 100%" ref="theme_echarts"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "Activitytheme",
  props: ["options"],
  watch: {
    options: {
      handler(val, old) {
        this.getInfo(val)
      },
    },
  },
  data() {
    return {
      chart: null
    };
  },

  mounted() {
    window.addEventListener("resize", this.chart);
  },
  destroyed() {
    window.removeEventListener("resize", this.chart);
  },

  methods: {
    getInfo(val) {
      const arr = []
      for(let i = 0; i < val.length; i++) {
        const group = {}
        group.name = val[i].value;
        group.symbolSize = 60;
        arr.push(group);
      }
      this.myEcharts(arr)
    },
    myEcharts(graphArr) {
      this.chart = echarts.init(this.$refs.theme_echarts);
      const size = this.$refs.theme_echarts.offsetWidth;
      //配置图表
      this.chart.setOption({
        title: {
          text: "所有活动的主题",
          textStyle: {
            fontSize: size / 20
          }
        },
        tooltip: {},
        animationDurationUpdate: 1500,
        animationEasingUpdate: "quinticInOut",
        color: ["#83e0ff", "#45f5ce", "#b158ff"],
        series: [
          {
            type: "graph",
            layout: "force",
            force: {
              repulsion: 1000,
              edgeLength: 50,
            },
            roam: true,
            label: {
              normal: {
                show: true,
              },
            },
            data: graphArr,
            lineStyle: {
              normal: {
                opacity: 0.9,
                width: 5,
                curveness: 0,
              },
            },
            categories: [{ name: "0" }, { name: "1" }, { name: "2" }],
          },
        ],
      });
      this.chart.resize();
    },
  },
};
</script>

<style scoped>
.theme_page {
  width: 100%;
  height: 100%;
}
</style>
